<template>
  <!-- 公司设置 -->
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <!-- table 栏切换 -->
          <el-tab-pane label="角色管理" name="first">
            <el-row style="margin: 30px 0px 20px 0px">
              <el-button
                type="success"
                icon="el-icon-plus"
                size="small"
                @click="showDialog = true"
                >新建角色</el-button
              >
            </el-row>
            <!-- table 表格 -->
            <el-table style="width: 100%" border :data="list">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="120px"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="角色名称"
                width="240px"
              >
              </el-table-column>
              <el-table-column align="center" prop="description" label="描述">
              </el-table-column>
              <el-table-column align="center" label="操作">
                <!-- 作用域插槽；中结构出来的row可以携带id -->
                <template slot-scope="{ row }">
                  <el-button
                    size="small"
                    type="success"
                    @click="btnPerm(row.id)"
                    >分配权限</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="editRole(row.id)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click="btnDelRole(row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 50px"
            >
              <!-- 分页部分 -->
              <el-pagination
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                :current-page="page.page"
                @current-change="currentPage"
              />
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="公司信息" name="second">
            <el-alert
              title="有志者、事竟成，破釜沉舟，百二秦关终属楚；苦心人、天不负，卧薪尝胆，三千越甲可吞吴。"
              type="info"
              show-icon
              :closable="false"
            >
            </el-alert>

            <el-form label-width="120px" style="margin-top: 50px">
              <el-form-item label="公司名称">
                <el-input
                  v-model="formDate.name"
                  disabled
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="formDate.companyAddress"
                  disabled
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  v-model="formDate.mailbox"
                  disabled
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input
                  v-model="formDate.remarks"
                  type="textarea"
                  style="width: 400px"
                  disabled
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 编辑弹出层 -->
      <el-dialog title="编辑部门" :visible="showDialog" @close="btnClose">
        <el-form
          :model="roleForm"
          :rules="formRules"
          ref="roleForm"
          label-width="120px"
        >
          <el-form-item prop="name" label="角色名称">
            <el-input v-model="roleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="roleForm.description"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="btnClose">取 消</el-button>
            <el-button size="small" type="primary" @click="btnOk"
              >确 定</el-button
            >
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 分配权限弹层 -->
      <el-dialog
        title="权限分配"
        :visible="showPermDialog"
        @close="btnPermCancel"
        width="45%"
      >
        <!-- 文档中的API 树形节点 -->
        <!-- id 作为树形结构的唯一标识 -->
        <!-- ref="premTree" 获取el-tree 中的实例方法 -->
        <el-tree
          ref="premTree"
          :data="Permtree"
          :props="defaultProps"
          default-expand-all
          show-checkbox
          check-strictly
          node-key="id"
          :default-checked-keys="selectNode"
        ></el-tree>
        <el-row slot="footer" type="flex" justify="center">
          <el-col>
            <el-button type="primary" size="small" @click="btnPermOk"
              >确定</el-button
            >
            <el-button size="small" @click="btnPermCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 获取所有权限列表
import { getPermissionList } from "@/api/permission";
// 转换为树形结构
import { transListDateTree } from "@/utils";
// 导入获取公司角色列表API,获取公司信息
import {
  getRoleList,
  getCompanyInfo,
  deleteRole,
  addRole,
  getRole,
  updateRole,
  assignPerm
} from "@/api/setting";
// 映射公司ID
import { mapGetters } from "vuex";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      selectNode: [], // (默认显示)定义一个数组用来接收，已经选中的节点
      PermId: null, // 记录当前分配角色权限的id
      Permtree: [], // 存储权限数据
      defaultProps: {
        label: "name"
      }, // 树形结构的默认节点
      showPermDialog: false,
      activeName: "first",
      list: [], // 存储公司角色列表数据
      page: {
        page: 1,
        pagesize: 10,
        total: 0 // 总数
      },
      formDate: {
        name: "万湖之洲",
        companyAddress: "美国加利福尼亚州洛杉矶市",
        mailbox: "8888888@163.com",
        remarks:
          "洛杉矶湖人队的现主场是斯台普斯中心球馆（STAPLES Center），坐落于洛杉矶市中心的菲格罗亚街上的洛杉矶会议中心建筑物群旁。"
      }, // 存储公司信息
      showDialog: false, // 控制弹出层的显示和隐藏
      roleForm: {
        name: "",
        description: ""
      },
      formRules: {
        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }]
      }
    };
  },

  // 计算属性
  computed: {
    // 结构出mapGetters 中的方法
    ...mapGetters(["companyId"])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 获取角色列表数据
    async getRole() {
      const { rows, total } = await getRoleList(this.page);
      //  console.log(rows, total);
      this.list = rows;
      this.page.total = total;
    },
    // 更新页码值
    currentPage(newPage) {
      //newPage 是当前点击的最新页码
      this.page.page = newPage; // 将当前当前最新的页码赋值给页码
      this.getRole(); // 重新渲染数据
    },
    // 获取公司信息数据
    async company() {
      const res = await getCompanyInfo(this.companyId);
      // console.log(res);
      // this.formDate = res;
    },
    // 编辑按钮
    async editRole(id) {
      // 回显数据
      this.roleForm = await getRole(id);
      // console.log(res);
      this.showDialog = true; // 为了不出现闪烁的问题，先获取数据，再弹出层
    },
    // 点击确认按钮
    async btnOk() {
      try {
        // 获取表单的实例对象，调用里面的方法
        await this.$refs.roleForm.validate();
        // 只有校验通过的情况下，才会执行await的下方内容
        if (this.roleForm.id) {
          await updateRole(this.roleForm);
        } else {
          // 新增业务
          await addRole(this.roleForm);
        }
        // 重新获取数据
        this.getRole();
        this.$message.success("操作成功");
        this.showDialog = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 关闭按钮
    btnClose() {
      this.roleForm = {
        name: "",
        description: ""
      };
      //移除校验
      this.$refs.roleForm.resetFields();
      // 关闭弹层
      this.showDialog = false;
    },

    // 删除角色按钮
    async btnDelRole(id) {
      try {
        await this.$confirm("确认删除该角色吗？");
        await deleteRole(id); // 调用删除接口
        this.getRole(); // 重新渲染数据
        // console.log(id);
        this.$message.success("删除角色成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 角色权限分配
    async btnPerm(id) {
      // 将数据转换为树形结构
      this.Permtree = transListDateTree(await getPermissionList(), "0");
      // 记录当前点击的id
      this.PermId = id;
      // 获取角色权限详情
      const { permIds } = await getRole(id);
      this.selectNode = permIds;
      this.showPermDialog = true;
    },
    // 权限取消
    async btnPermCancel() {
      this.selectNode = []; // 重置数据
      this.showPermDialog = false;
    },
    async btnPermOk() {
      // 获取树形结构的 实例对象中的方法
      // console.log(this.$refs.premTree.getCheckedKeys());
      // 给角色分配权限
      await assignPerm({
        permIds: this.$refs.premTree.getCheckedKeys(),
        id: this.PermId
      });
      this.$message.success("更新权限成功");
      this.showPermDialog = false;
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getRole(); // 获取角色列表数据
    this.company(); // 获取公司信息数据
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {}
};
</script>

<style>
/* .el-input__inner {
  background-color: #f5f7fa;
} */
</style>
